'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { message,Tabs,Input, Alert,Row, Col, Form , Radio, Button, Upload, Icon } from 'antd';
const TabPane = Tabs.TabPane;
import { InputNumber } from 'antd';

import PhonePreview from './PhonePreview.jsx';
import Api from '../../../../config/api';
import Request from '../../utils/request';
import { setRow,setDetail } from '../../reducers/page/actions';
import { setLoading } from '../../reducers/common/actions';

import DiyBox from '../../../../components/diy/Diy.jsx';
import SwiperBox from '../../../../components/swiper/Swiper.jsx';
import DiyProductBox from './DiyProductBox.jsx';
import SwiperProductBox from './SwiperProductBox.jsx';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;


class ComponentBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectIndex:null
        };
    }
    render() {
        const props = {
            name: 'file',
            listType:"picture",
            showUploadList:false,
            headers: {
                Authorization: Request.getSession(),
            },
            onRemove:(file)=>{
                return file;
            },
            beforeUpload:()=>{
                this.props.setLoading(true);
            },
            onChange:(info)=> {
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 上传成功。`);
                    let {url} = info.file.response;
                    this.changePic(url);
                    this.props.setLoading(false);
                } else if (info.file.status === 'error') {
                    this.props.setLoading(false);
                    message.error(`${info.file.name} 上传失败。`);
                }
            },
            action: Api.adminUpload,
            multiple:false
        };
        let data = this.props.detail.items[this.props.curTabKey];
        //console.log(data)
        //let data = this.props.row.swiperData;
        let {url,type} = {};
        let tabPanes = [];
        if(this.state.selectIndex !== null){
            let row = data.state.picItems[this.state.selectIndex];
            url = row.url;
            type = row.type;
            for(let i = 0 ;i < parseInt(type);i++){
                tabPanes.push(
                    <TabPane tab={i+1} key={i}>
                        <SwiperProductBox
                            selectIndex={this.state.selectIndex}
                            index={i} />
                    </TabPane>
                )
            }
        }
        return (
            <Row gutter={16}>
                <Col span={10}>
                    <Form horizontal >
                        <FormItem
                            label="图数"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 19 }}
                            help={`轮播组数为${data.state.num}组`}>
                            <InputNumber  min={3} max={30} value={data.state.num} onChange={::this.onChangeSwiperLen} />
                        </FormItem>
                    </Form>
                    {
                        this.state.selectIndex === null ?
                            <Alert message="请点击右侧图片区域" type="info"/>:
                            <div>
                                <Form horizontal >
                                    <FormItem
                                        label="序号"
                                        labelCol={{ span: 5 }}
                                        wrapperCol={{ span: 19 }}>
                                        <p className="ant-form-text"><b className="se">{this.state.selectIndex + 1}</b></p>
                                        {
                                            url ?<p><img src={url} width="100" height="80" alt=""/></p>:null
                                        }

                                    </FormItem>
                                    <FormItem
                                        label="导航图"
                                        labelCol={{ span: 5 }}
                                        wrapperCol={{ span: 19 }}
                                        help={`上传格式:png/jpg,宽度和长度比例:3/2,图片在不失真的情况下尽量压缩`}>
                                        <Upload  {...props} >
                                            <Button type="ghost">
                                                <Icon type="upload" /> 点击上传
                                            </Button>
                                        </Upload>
                                    </FormItem>
                                    <FormItem
                                        label="类型"
                                        labelCol={{ span: 5 }}
                                        wrapperCol={{ span: 19 }}>
                                        <RadioGroup onChange={::this.onChangeValue.bind(this,'type')} value={parseInt(type)}>
                                            <Radio key="a" value={3}> 1 * 3</Radio>
                                            <Radio key="b" value={6}> 2 * 3</Radio>
                                        </RadioGroup>
                                    </FormItem>
                                </Form>

                                <Tabs onChange={()=>{}} type="card">
                                    {tabPanes}
                                </Tabs>
                            </div>
                    }
                </Col>
                <Col span={14}>
                    <PhonePreview>
                        <SwiperBox
                            editMode={true}
                            editSwiper={::this.editSwiper}
                            deviceWidth={this.props.common.deviceWidth}
                            data={data}/>
                    </PhonePreview>
                </Col>
            </Row>
        );
    }
    onChangeSwiperLen(value){
        value = parseInt(value);
        let {detail} = this.props;
        detail = detail.setIn(['items',this.props.curTabKey,"state","num"], value);
        let {picItems} = detail.items[this.props.curTabKey].state;
        if(picItems.length < value){
            picItems = picItems.asMutable();
            picItems.push({
                url:"",
                type:6,
                items:[
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    },
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    },
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    },
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    },
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    },
                    {
                        url:"",
                        title:"",
                        id:"",
                        price:"",
                    }
                ]
            });
            detail = detail.setIn(['items',this.props.curTabKey,"state","picItems"],picItems);
        }
        //console.log(index,row);
        this.props.setDetail(detail);
    }
    onChangeValue(key,e){
        let {detail} = this.props;
        let value = e.target.value;
        //console.log(e.target.value)
        detail = detail.setIn(['items',this.props.curTabKey,"state","picItems",this.state.selectIndex,key], value);
        //console.log(index,row);
        this.props.setDetail(detail);
    }
    editSwiper(selectIndex){
        //console.log(selectIndex)
        this.setState({selectIndex});
    }
    changePic(url){
        let {detail} = this.props;
        detail = detail.setIn(['items',this.props.curTabKey,"state","picItems",this.state.selectIndex,'url'], url);
        //console.log(index,row);
        this.props.setDetail(detail);
    }
}

export default connect(
    state =>{
        return {
            row:state.page.row,
            detail:state.page.detail,
            curTabKey:state.page.curTabKey,
            common:state.common
        }
    },
    dispatch =>{
        return {
            setRow: (row)=>dispatch(setRow(row)),
            setDetail: (row)=>dispatch(setDetail(row)),
            setLoading: (isLoading)=>dispatch(setLoading(isLoading))
        };
    }
)(ComponentBox);

